<template>
    <!--课时选择-->
    <div class="PeriodsList" v-if="infoKESHI.length != 0">
        <ul>
            <li v-for="(val,index) in infoKESHI" @click.stop="chooseKESHI($event,val)">
                第{{val.ClassPeriod}}课时
            </li>
        </ul>
    </div>
</template>
<script>
    import {mapGetters, mapActions} from 'vuex'
    import store from '../store/'
    export default {
        name: "PeriodsList",
        data () {
            return {}
        },
        computed: mapGetters([
            'infoKESHI'
        ]),
        methods: {
            chooseKESHI(event, val){
                $('.layui-layer.layui-layer-tips.layer-anim').remove()
                //显示选择的课时
                store.state.mutations.configJIAOCAI.KESHI = event.target.innerHTML
                //关闭课时选择框
                store.state.mutations.showJIAOCAI.KESHI = false;
                //存入课时ID（备课编码）
                window.LessionID = val.ID
                //根据课时ID获取备课步骤
                this.$http.get(('api/lession/steps?id=' + val.ID + '&sk=' + store.state.mutations.getToken)).then(function (res) {
                    store.state.mutations.lessionSteps = res.data.data
                })
                //跳转至备课步骤
                this.$router.push('/home/XK')
            }
        }
    }
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
    @import '../assets/css/public.scss';

    div.PeriodsList {
        position: absolute;
        left: 0;
        bottom: 60px;
        right: 0;
        margin: auto;
        width: 900px;
        max-height: 600px;
        overflow-y: auto;
        overflow-x: hidden;
        background: #fff;
        margin: 0 auto;
        box-shadow: $boxShadow;
        ul {
            margin: 20px auto;
            li {
                height: 30px;
                line-height: 30px;
                font-size: 22px;
                text-align: center;
                color: #ccc;
                transition: transform .2s linear;
                cursor: pointer;
            }
            li:hover {
                transform: translateX(10px);
                color: #333;
            }
            li.confirmPer {
                color: #000;
                font-size: 24px;
            }
            li.confirmPer:hover {
                transform: translateX(0);
                color: #000;
            }
        }
    }
</style>